<template>
	<private_dialog ref="dialogRef" width="600" :beforeClose="dialogCancel">
		<el-form ref="formRef" :rules="fromRule" :model="form" inline label-width="auto">
			<el-row :gutter="20">
				<!-- 用户账号 -->
				<el-col :span="12">
					<el-form-item label="用户账号" prop="username" class="w-100">
						<el-input v-model="form.username" placeholder="请输入用户账号"></el-input>
					</el-form-item>
				</el-col>
				<!-- 用户密码 -->
				<el-col :span="12">
					<el-form-item label="用户密码" prop="password" class="w-100">
						<el-input v-model="form.password" placeholder="请输入用户密码"></el-input>
					</el-form-item>
				</el-col>
				<!-- 用户昵称 -->
				<el-col :span="12">
					<el-form-item label="用户昵称" prop="nickname" class="w-100">
						<el-input v-model="form.nickname" placeholder="请输入用户昵称"></el-input>
					</el-form-item>
				</el-col>
				<!-- 手机号 -->
				<el-col :span="12">
					<el-form-item label="手机号" prop="phone" class="w-100">
						<el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
				</el-col>
				<!-- 角色 -->
				<el-col :span="12">
					<el-form-item label="角色" prop="role" class="w-100">
						<el-select v-model="form.role" placeholder="请选择角色" multiple>
							<el-option v-for="item in roleArr" :key="item._id" :label="item.name" :value="item._id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- 部门 -->
				<el-col :span="12">
					<el-form-item label="部门" prop="department" class="w-100">
						<el-tree-select
							v-model="form.department"
							:data="departmentArr"
							:props="{ label: 'name' }"
							node-key="_id"
							placeholder="请选择部门"
							check-strictly
						>
						</el-tree-select>
					</el-form-item>
				</el-col>
				<!-- 状态 -->
				<el-col :span="12">
					<el-form-item label="状态" prop="status" class="w-100">
						<el-select v-model="form.status" placeholder="请选择状态">
							<el-option label="启用" value="enable"></el-option>
							<el-option label="禁用" value="disable"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</private_dialog>
</template>

<script setup>
import { ref } from "vue";
import private_dialog from "@/components/confirmDialog/index.vue";
import { addUserApi, editUserApi } from "@/api/system/user";
import { userStore } from "@/stores/user";
const user = userStore();

const props = defineProps({
	fullData: { type: Array, required: true },
	departmentArr: { type: Array, required: true },
	roleArr: { type: Array, required: true },
});
const emit = defineEmits(["updateFullData"]);

// DialogRef
const dialogRef = ref();
// Dialog关闭时
const dialogCancel = () => {
	formRef.value.resetFields();
	formRef.value.clearValidate();

	form.value = { name: "", key: "", status: "enable", pid: "", sort: 1 };
};
// 当前打开的Dialog类型
const currentDialogType = ref("add");

// 表单Ref
const formRef = ref();
// 表单数据
const form = ref({
	username: "",
	password: "",
	nickname: "",
	phone: "",
	role: "",
	department: "",
	status: "enable",
});
// 表单校验规则
const fromRule = {
	username: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
	password: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
	nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
	phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
	role: [{ required: true, message: "请选择角色", trigger: "blur" }],
	department: [{ required: true, message: "请选择部门", trigger: "blur" }],
};

defineExpose({
	open: ({ type = "add", data } = {}) => {
		// 设置当前打开的Dialog类型
		currentDialogType.value = type;

		// 打开Dialog, 并设置回调.
		dialogRef.value.open({
			title: "用户操作",
			isAsync: true,
			// 打开后的回调.
			openAfter: () => {
				// 打开dialog后设置回显表单数据, 否则关闭后值不会清空.
				if (type === "edit") form.value = JSON.parse(JSON.stringify(data));
			},
			// 确认回调.
			confirm: async ({ stopLoading, done }) => {
				// 校验表单
				try {
					await formRef.value.validate();
				} catch (e) {
					return stopLoading();
				}

				try {
					// 添加部门
					if (type === "add") {
						await addUserApi(form.value);
					}

					// 编辑部门
					if (type === "edit") {
						await editUserApi(form.value);
					}

					done();
				} catch (e) {
					return stopLoading();
				}

				emit("updateFullData");
			},
			cancel: () => {},
		});
	},
});
</script>

<style scoped lang="scss"></style>
